<template>
  <div class="theme-wrapper">
    <el-dialog
      :modal="false"
      title="修改主题"
      :visible="true"
      width="50%"
      center
    >
      <loading :value="isShowLoading" :width="200" />
      <el-row>
        <el-col>选择颜色：</el-col>
        <el-col></el-col>
      </el-row>
      <el-row>
        <el-col>选择背景</el-col>
        <el-col></el-col>
      </el-row>
      <div class="change-sel">
        <el-upload
          class="upload-demo"
          drag
          action="http://localhost:3000/doc/upload"
          multiple
          :auto-upload="false"
          :on-change="uploadFilesFn"
          @preview="handlerPreviewFn"
          @progress="handlerProgressFn"
          :before-upload="beforeUploadFn"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toCloseDia">取 消</el-button>
        <el-button type="primary" @click="commitFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "themeSelCom", // 主题选择组件
  components: {},
  props: ["isShowing"],
  data() {
    return {
      isShowLoading: false, //是否展示loading
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 取消事件
    toCloseDia() {
      this.$emit("close");
    },
    // 确定
    commitFn() {
      this.$emit("close");
    },
    uploadFilesFn(val, valList) {
      var formData = new FormData();
      formData.append("file", val.raw);
      console.log("valvalvjlajlvj", typeof val.raw, valList, formData);
      this.$API
        .uploadImg(formData)
        .then((res) => {
          console.log(res, "res");
        })
        .catch((err) => {
          console.log("err,err", err);
        });
    },
    handlerPreviewFn(files) {
      console.log(files, "handlerPreview");
    },
    handlerProgressFn(val) {
      console.log("handlerProgressFn", val);
    },
    beforeUploadFn(file) {
      console.log(file, "12222222");
    },
  },
};
</script>

<style lang="scss" scoped>
.theme-wrapper {
}
</style>
